1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
import React from 'react';
import Link from 'next/link';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Briefcase, Package, Settings, ArrowRight, CheckCircle, Monitor, Shield, BarChart3, Building2 } from 'lucide-react';
export default function LandingPage() {
const portals = [
{
id: 'sales',
title: '기술 영업 포털',
description: '기술 영업 단계에서의 RFQ를 관리할 수 있는 통합 플랫폼',
icon: Briefcase,
color: 'from-green-500 to-emerald-500',
// href: '/sales',
href: '/evcp',
features: ['벤더 관리', '기술 영업 RFQ'],
},
{
id: 'purchase',
title: '구매 포털',
description: '협력 업체에서 부터 마지막 발주까지 원스톱 구매 솔루션',
icon: Package,
color: 'from-blue-500 to-indigo-500',
// href: '/procurement',
href: '/evcp',
features: ['협력 업체 관리', '구매 관리'],
},
{
id: 'design',
title: '설계 포털',
description: '벤더가 플랫폼을 통해 데이터와 문서를 제출할 수 있게 하고 TBE를 처리할 수 있는 플랫폼',
icon: Settings,
color: 'from-purple-500 to-violet-500',
// href: '/engineering',
href: '/evcp',
features: ['설계 기준정보 관리', 'TBE'],
}
];
return (
<div className="min-h-screen bg-white">
{/* Header */}
<header className="relative overflow-hidden">
<div
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: "url('/images/headerImg.png')"
}}
></div>
<div className="absolute inset-0 bg-black/20"></div>
<div className="relative container mx-auto px-4 py-16 md:py-24 text-center">
<div className="flex items-center justify-center mb-8">
<h1 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white leading-tight">
Enterprise Vendor Co-work Platform
</h1>
</div>
<p className="text-lg md:text-xl lg:text-2xl text-white max-w-4xl mx-auto leading-relaxed mb-8">
통합된 비즈니스 솔루션으로 구매부터 설계까지,
<br className="hidden md:block" />
모든 업무 프로세스를 하나의 플랫폼에서 관리하세요
</p>
</div>
</header>
{/* Main Portal Selection */}
<main className="container mx-auto px-4 py-12 md:py-20">
<div className="flex flex-col max-w-7xl mx-auto ">
<div className="flex flex-col items-left justify-center" >
<div className="text-left mb-12 md:mb-16">
<h2 className="text-2xl md:text-3xl lg:text-4xl font-bold text-slate-800 mb-4">
포털을 선택하세요
</h2>
<p className="text-base md:text-lg text-slate-600 max-w-2xl leading-relaxed">
각 포털은 특화된 기능과 도구를 제공하여 업무 효율성을 극대화합니다
</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">
{portals.map((portal) => {
const Icon = portal.icon;
return (
<Link key={portal.id} href={portal.href} className="block">
<Card className="relative group cursor-pointer transition-all duration-300 hover:scale-105 hover:shadow-xl bg-white border-slate-200 overflow-hidden h-full">
<div className={`absolute inset-0 bg-gradient-to-br ${portal.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300`}></div>
<CardHeader className="relative pb-3">
<div className="flex items-start justify-between mb-4">
<div className={`w-12 h-12 md:w-14 md:h-14 rounded-lg bg-gradient-to-br ${portal.color} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 flex-shrink-0`}>
<Icon className="h-6 w-6 md:h-7 md:w-7 text-white" />
</div>
</div>
<CardTitle className="text-xl md:text-2xl font-bold text-slate-800 text-left group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text transition-all duration-300 mb-2">
{portal.title}
</CardTitle>
<CardDescription className="text-slate-600 text-sm md:text-base leading-relaxed text-left">
{portal.description}
</CardDescription>
</CardHeader>
<CardContent className="relative pt-0">
<div className="mb-6">
<h4 className="font-semibold text-slate-700 mb-3 text-sm md:text-base text-left">주요 기능</h4>
<div className="space-y-2">
{portal.features.map((feature, idx) => (
<div key={idx} className="flex items-center text-sm text-slate-600">
<div className={`w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-gradient-to-r ${portal.color} mr-3 flex-shrink-0`}></div>
<span className="text-xs md:text-sm text-left">{feature}</span>
</div>
))}
</div>
</div>
<div className="flex justify-end">
<Button className={`bg-gradient-to-r ${portal.color} hover:opacity-90 text-white border-0 group-hover:shadow-lg transition-all duration-300 text-sm px-6 py-2`}>
접속하기
<ArrowRight className="ml-2 h-3 w-3 md:h-4 md:w-4 group-hover:translate-x-1 transition-transform duration-300" />
</Button>
</div>
</CardContent>
</Card>
</Link>
);
})}
</div>
{/* Additional Info Section */}
<div className="mt-16 md:mt-20 flex flex-col md:flex-row gap-8 md:gap-12">
{/* Left Section - Text Content */}
<div className="flex-1 text-left">
<div className="bg-white mt-12 rounded-lg">
<h3 className="text-xl md:text-2xl lg:text-3xl font-bold text-slate-800 mb-4">
모든 포털이 연동됩니다
</h3>
<p className="text-sm md:text-base lg:text-lg text-slate-600 mb-6 md:mb-8 leading-relaxed">
구매, 영업, 설계 포털 간의 데이터가
<br className="hidden md:block" />
실시간으로 동기화되어 효율적인 업무 협업이 가능합니다
</p>
</div>
</div>
{/* Right Section - Feature Icons */}
<div className="flex-1">
<div className="grid grid-cols-2 gap-3 md:gap-4">
<div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
<CheckCircle className="h-8 w-8 md:h-12 md:w-12 text-green-500 mb-2 flex-shrink-0" />
<span className="text-xs md:text-sm text-slate-700 text-center">실시간 동기화</span>
</div>
<div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
<Monitor className="h-8 w-8 md:h-12 md:w-12 text-blue-500 mb-2 flex-shrink-0" />
<span className="text-xs md:text-sm text-slate-700 text-center">통합 대시보드</span>
</div>
<div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
<Settings className="h-8 w-8 md:h-12 md:w-12 text-purple-500 mb-2 flex-shrink-0" />
<span className="text-xs md:text-sm text-slate-700 text-center">권한 관리</span>
</div>
<div className="flex flex-col items-center justify-center bg-slate-100 rounded-lg px-4 py-4 md:px-6 md:py-6">
<Shield className="h-8 w-8 md:h-12 md:w-12 text-yellow-500 mb-2 flex-shrink-0" />
<span className="text-xs md:text-sm text-slate-700 text-center">보안 인증</span>
</div>
</div>
</div>
</div>
</div>
</main>
{/* Footer */}
<footer className="bg-slate-800 text-white py-8 md:py-12 mt-16 md:mt-20">
<div className="container mx-auto px-4 text-center">
<div className="flex flex-col items-center justify-center mb-4 md:mb-6">
<div className="flex items-center justify-center">
<img
src="/images/samsung_logo.png"
alt="삼성중공업 로고"
className="h-8 w-auto md:h-10 mr-2"
/>
<span className="text-lg md:text-xl font-semibold">삼성중공업 <span className="font-normal">eVCP</span></span>
</div>
<div className="text-sm md:text-base text-slate-300 mt-2">
Enterprise Vendor Co-work Platform
</div>
</div>
<p className="text-slate-400 text-xs md:text-sm">
© 2025 삼성중공업. All rights reserved.
</p>
</div>
</footer>
</div>
);
}
|
